<template>
  <el-form :model="formItems" :rules="rules" ref="formRef" label-width="120px">
    <el-row v-for="(item, index) in formItems" :key="index">
      <el-col :span="12">
        <el-form-item prop="name">
          <el-input v-model="item.name" placeholder="请输入名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="description">
          <el-input v-model="item.description" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="addFormItem">添加表单项</el-button>
      <el-button @click="addFormItem(3)">批量添加3条表单项</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formItems: [{ name: '', description: '' }],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
      },
    }
  },
  methods: {
    addFormItem(count = 1) {
      for (let i = 0; i < count; i++) {
        this.formItems.push({ name: '', description: '' })
      }
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('表单数据:', this.formItems)
          // 提交逻辑
        } else {
          console.log('验证失败')
          return false
        }
      })
    },
  },
}
</script>
